<template>
  <div>
    <el-card class="box-card" :body-style="{ padding: '0px' }" shadow="hover">
      <div slot="header" class="clearfix">
        <el-avatar shape="square" size="large" src="https://cube.elemecdn.com/0/88/03b0d39583f48206768a7534e55bcpng.png"></el-avatar><br/>
        <span class="text">{{ user.username }}</span>
        <div>
          <el-button type="primary" @click="modifyInfo">修改信息</el-button>
          <el-button type="primary" @click="onRecharge">余额充值</el-button>
        </div>
      </div>

      <!--基本信息-->
      <div class="bottom clearfix">
        <el-form :model="user" status-icon label-width="100px" class="demo-ruleForm">
          <el-form-item label="用户名:" prop="username">
            <span v-text="user.username"></span>
          </el-form-item>

          <el-form-item label="电话:" prop="phone">
            <span v-text="user.phone"></span>
          </el-form-item>
          <el-form-item label="余额:" prop="wallet">
            <span v-text="user.wallet"></span>
          </el-form-item>
          <el-form-item label="真实姓名:" prop="trueName">
            <span v-text="user.trueName"></span>
          </el-form-item>
          <el-form-item label="性别:" prop="gender">
            <span v-if="user.gender===1">男</span>
            <span v-if="user.gender===2">女</span>
          </el-form-item>
        </el-form>
      </div>

    </el-card>

    <!--充值,保留一位小数-->
    <div>
      <el-dialog
        title="提示"
        :visible.sync="rechargeDiaVisible"
        width="30%"
        :before-close="handleClose">
        <span>充值金额: </span>
        <el-input v-model="money"
                  placeholder="请输入内容"
                  oninput="if(isNaN(value)) { value = null } if(value.indexOf('.')>0){value=value.slice(0,value.indexOf('.')+2)}"
        ></el-input>
        <span slot="footer" class="dialog-footer">
            <el-button @click="rechargeDiaVisible = false">取 消</el-button>
            <el-button type="primary" @click="recharge">确 定</el-button>
          </span>
      </el-dialog>
    </div>

    <el-dialog
      title="修改信息"
      :visible.sync="modifyDiaVisible"
      width="30%"
      :before-close="handleClose">
      <el-form ref="user" :model="userModify" label-width="80px">
        <el-form-item label="用户名">
          <el-input v-model="userModify.username"></el-input>
        </el-form-item>
        <el-form-item label="密码">
          <el-input v-model="userModify.password" show-password></el-input>
        </el-form-item>
        <el-form-item label="电话">
          <el-input v-model="userModify.phone"></el-input>
        </el-form-item>
        <el-form-item label="真实姓名">
          <el-input v-model="userModify.trueName"></el-input>
        </el-form-item>
        <el-form-item label="性别">
          <el-radio-group v-model="userModify.gender">
            <el-radio :label='1'>男</el-radio>
            <el-radio :label='2'>女</el-radio>
          </el-radio-group>
        </el-form-item>

        <el-form-item>
          <el-button type="primary" @click="onSubmit">修改</el-button>
          <el-button @click="cancelModify">取消</el-button>
        </el-form-item>
      </el-form>
    </el-dialog>

  </div>
</template>

<script>
    export default {
      name: "Reset",
      inject: ['reload'],
      data() {
        return{
          modifyDiaVisible: false,
          rechargeDiaVisible: false,
          money: 0,
          userModify: {
            id: null,
            username: "",
            password: "",
            phone: "",
            wallet: 0,
            trueName: "",
            gender: ''
          },
        }
      },
      computed: {
        user() {
          return this.$store.state.user;
        }
      },
      methods: {
        handleClose(done) {
          this.$confirm('确认关闭？')
            .then(_ => {
              this.modifyDiaVisible=false;
              // done();
            })
            .catch(_ => {});
        },
        // 显示修改页面
        modifyInfo: function () {
          // this.userModify=this.user; //不能这样，否则会改动this.user的属性
          this.userModify.id=this.user.id;
          this.userModify.username=this.user.username;
          this.userModify.password=this.user.password;
          this.userModify.phone=this.user.phone;
          this.userModify.trueName=this.user.trueName;
          this.userModify.gender=this.user.gender;
          this.modifyDiaVisible=true;
        },
        // 提交修改
        onSubmit() {
          console.log('submit modify information!');
          console.log(this.userModify);
          this.$axios({
            method: 'post',
            url: '/user/reset',
            data: {
              id: this.userModify.id,
              username: this.userModify.username,
              password: this.userModify.password,
              phone: this.userModify.phone,
              trueName: this.userModify.trueName,
              gender: this.userModify.gender
            }
          })
            .then(response => {
              if (response.data.success) {
                console.log("reset success");
                // console.log(response);
                this.$store.commit('setUser', response.data.user);
                this.modifyDiaVisible=false;
              } else {
                console.log("reset failure");
              }
            })
            .catch(error => {
              console.log(error);
            })
        },
        cancelModify() {
          this.modifyDiaVisible=false;
        },
        onRecharge() {
          this.rechargeDiaVisible=true;
        },
        // 余额充值
        recharge() {
          console.log('recharge wallet');
          console.log(this.money);
          this.$axios.get("/user/recharge", {
            params: {
              id: this.user.id,
              value: this.money
            }
          })
            .then(response => {
              if (response.data.success){
                console.log(response.data.message);
                // 需要重新写入user的wallet
                this.$store.commit('setWallet', response.data.money);
                this.reload();
              } else {
                console.log(response.data.message);
              }
            })
            .catch(error => {
              console.log(error);
            })
        },

      }
    }
</script>

<style scoped>

</style>
